<!-- 参考至网络：https://blog.csdn.net/weixin_41350225/article/details/89079505 -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Demo-TODOList</title>
    <!-- vuejs 库 -->
    <script type="text/javascript" src="./js/vue.js"></script>
    <link rel="stylesheet" href="./css/index.css" />
  </head>
  <body>
    <h1>Vue实现todolist</h1>
    <div id="app">
      <select v-model="option">
        <option value="">--请选择事件类型--</option>
        <option v-for="item in optionList">{{ item }}</option>
      </select>
      <input type="text" v-model="inputValue" />
      <button @click="add">增加事件</button>
      <ul v-if="option=='所有事件'">
        <li v-for="(list,index) of lists">
          <span class="status" :class="[list.status ? 'ready': 'todo']"
            >{{list.status ? "完成" : "待完成"}}</span
          >
          <span v-if="list.status==false" class="spanwith"
            >{{list.eventVal}}</span
          >
          <span v-else class="deleteline spanwith">{{list.eventVal}}</span>
          <!-- 这里的完成事件和删除事件我都传入了数组的id，而不是遍历的下标index -->
          <button @click="del(list.id)">删除</button>
        </li>
      </ul>
      <ul v-if="option=='未完成事件'">
        <li v-for="(list,index) of lists" v-if="list.status==false">
          <span class="status" :class="[list.status ? 'ready': 'todo']"
            >{{list.status ? "完成" : "待完成"}}</span
          >
          <span class="spanwith">{{list.eventVal}}</span>
          <!-- 这里的完成事件和删除事件我都传入了数组的id，而不是遍历的下标index -->
          <button @click="complete(list.id)">完成</button>
          <button @click="del(list.id)">删除</button>
        </li>
      </ul>
      <ul v-if="option=='完成事件'">
        <li v-for="(list,index) of lists" v-if="list.status==true">
          <span class="status" :class="[list.status ? 'ready': 'todo']"
            >{{list.status ? "完成" : "待完成"}}</span
          >
          <span class="deleteline spanwith">{{list.eventVal}}</span>
          <button @click="uncomplete(list.id)">未完成</button>
          <button @click="del(list.id)">删除</button>
        </li>
      </ul>
      <div class="tips">{{tipMessage}}</div>
    </div>
    <script type="text/javascript" src="./js/index.js"></script>
  </body>
</html>
